<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="el-icon el-icon-s-unfold" size="20">
                <Fold />
            </el-icon>
            <ul class="flex-box">
                <li v-for="(item, index) in selectMenu" :key="item.path"
                    :class="{ selected: selectedPath === item.path }" class="tab flex-box">
                    <el-icon class="el-icon1" :class="item.icon"></el-icon>
                    <router-link class="text flex-box" :to="{ path: item.path }">
                        {{ item.name }}
                    </router-link>
                    <i class="el-icon-close" @click="closeTap(item, index)"></i>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <el-dropdown trigger="click">
                <div class="el-dropdown-link" style="display: flex; align-items: center; cursor: pointer;">
                    <el-avatar :src="getAvatarUrl(userInfo.first_name) || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'">
                    </el-avatar>
                    <p style="margin-left: 15px;">{{ userInfo.username || '未登录' }}</p>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="profile" @click.native="handleProfileClick">个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout" @click.native="handleLogoutClick" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { BASE_URL } from '@/config'

export default {
    data() {
        return {
            selectedPath: '',
        };
    },
    methods: {
        getAvatarUrl(url) {
            if (!url) return ''
            if (url.startsWith('http')) return url
            return `${BASE_URL}${url}`
        },
        handleProfileClick() {
            this.$router.push('/setting');
        },
        handleLogoutClick() {
            this.$confirm('确定要退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('user/logout').then(() => {
                    this.$message.success('退出登录');
                    this.$router.push('/login');
                }).catch(() => {
                    this.$message.error('退出登录失败');
                });
            }).catch(() => {});
        },
        closeTap(item, index) {
            const selectMenuData = this.selectMenu;
            this.$store.commit('closeMenu', item);
            if (this.selectedPath !== item.path) {
                return;
            }
            // 删除最后一页
            if (index === selectMenuData.length) {
                // 如果 tag 只有一个
                if (!selectMenuData.length) {
                    this.$router.push('/home');
                } else {
                    this.$router.push(selectMenuData[index - 1].path);
                }
            } else {
                // 删除中间页
                this.$router.push(selectMenuData[index].path);
            }
        }
    },
    mounted() {
        this.selectedPath = this.$route.path;
    },
    watch: {
        '$route': {
            immediate: true,
            handler(newRoute) {
                this.selectedPath = newRoute.path;
            }
        }
    },
    computed: {
        ...mapState('user', ['userInfo']),
        selectMenu() {
            return this.$store.state.selectMenu;
        },
    },
}
</script>

<style scoped lang="less">
.flex-box {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 100;

    .header-left {
        height: 100%;
        display: flex;
        align-items: center;
        gap: 20px;

        .el-icon {
            width: 45px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 4px;

            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
                color: #409eff;
            }
        }

        ul {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0;
            padding: 0;
        }

        .tab {
            padding: 0 15px;
            height: 36px;
            display: flex;
            align-items: center;
            border-radius: 4px;
            transition: all 0.3s ease;
            position: relative;
            background: transparent;

            .text {
                margin: 0 5px;
                font-size: 14px;
                color: #606266;
                transition: color 0.3s ease;
            }

            .el-icon1 {
                font-size: 16px;
                color: #909399;
                transition: color 0.3s ease;
            }

            .el-icon-close {
                visibility: hidden;
                margin-left: 5px;
                font-size: 14px;
                color: #909399;
                transition: all 0.3s ease;
                opacity: 0;
                transform: scale(0.8);
            }

            &:hover {
                background-color: rgba(0, 0, 0, 0.05);

                .el-icon-close {
                    visibility: visible;
                    opacity: 1;
                    transform: scale(1);
                }
            }

            &.selected {
                background-color: #ecf5ff;
                
                .text {
                    color: #409eff;
                }

                .el-icon1 {
                    color: #409eff;
                }

                .el-icon-close {
                    color: #409eff;
                }
            }
        }
    }

    .header-right {
        .el-dropdown-link {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
                background-color: transparent;
            }

            .el-avatar {
                border: 2px solid #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            p {
                margin: 0 10px;
                color: #606266;
                font-size: 14px;
            }

            .el-icon-arrow-down {
                color: #909399;
                transition: transform 0.3s ease;
            }

            &:hover .el-icon-arrow-down {
                transform: rotate(180deg);
            }
        }
    }
}

:deep(.el-dropdown-menu) {
    padding: 5px 0;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .el-dropdown-menu__item {
        padding: 8px 20px;
        font-size: 14px;
        color: #606266;
        transition: all 0.3s ease;

        &:hover {
            background-color: #ecf5ff;
            color: #409eff;
        }

        &.is-divided {
            border-top: 1px solid #ebeef5;
        }
    }
}
</style>